<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>
            <input type="text" id="inp">
            <button @click="addHeroFn">添加英雄</button>
        </p>
        <ul>
            <li v-for="item in heroArr" :key="item.id">
                <input type="checkbox">
                <span>{{item.name}}--{{item.type}}</span>
            </li>
        </ul>
    </div>

</body>

</html>
<script>
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                heroArr: [{
                    id: 1,
                    name: '兰陵王',
                    type: '刺客'
                },
                {
                    id: 2,
                    name: '王昭君',
                    type: '法师'
                },
                {
                    id: 3,
                    name: '关羽',
                    type: '战士'
                },
                {
                    id: 4,
                    name: '后羿',
                    type: '射手'
                }]
            }
        },
        methods: {
            addHeroFn() {
                let value = document.querySelector('#inp').value
                console.log(value);
                this.heroArr.unshift({
                    id: this.heroArr[0].id - 1,
                    name: value,
                    type: '射手'
                })
            }
        }
    }).mount('#app')


</script>